<template>
  <div id="tmpl" class="mui-content">
    <div>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item in list">
          <router-link v-bind="{to:'/news/newsinfo/' + item.id}">
            <div v-if="item.imgurl">
              <img class="mui-media-object mui-pull-left" :src="item.imgurl">
            </div>
            <div class="mui-media-body">
              <div class="mui-ellipsis">{{item.title}}</div>
              <p class='mui-ellipsis'>
                <span v-for="keyword in item.keywords" class="keyword">{{keyword.keyname}} </span>
              </p>
              <div class='ft'>
                <span class="fb-time">发表时间：{{item.time}}</span>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import { getnewslist } from '@/api/news'
  import News from '@/common/news'
  //  import { ERR_OK } from '@/api/config'

  export default {
    data () {
      return {
        list: []
      }
    },
    created () {
      this._getlist()
    },
    methods: {
      _getlist () {
        getnewslist().then((res) => {
          this.list = this._nomalLizeNews(res)
          console.log(this._nomalLizeNews(res))
        })
      },
      _nomalLizeNews (list) {
        let newslist = []
        var _this = this
        list.forEach(function (item) {
          newslist.push(new News({
            id: _this._getNewId(item.docurl),
            title: item.title,
            comment: item.commenturl,
            keywords: item.keywords,
            time: item.time,
            imgurl: item.imgurl
          }))
        })
        return newslist
      },
      _getNewId (value) {
        if (!value) return ''
        var _arr = value.split('/')
        var _idHtml = _arr.splice(-1)
        return _idHtml[0].slice(0, -5)
      }
    }
  }
</script>
<style scoped>
  .mui-table-view img {
    height: 80px;
    width: 80px;
  }

  .mui-table-view .mui-media-object {
    max-width: 80px;
    line-height: 80px;
  }

  .ft {
    margin-top: 10px;
  }

  .fb-time {
    color: #aaa;
    font-size: 12px;
  }

  .keyword {
    margin-right: 5px;
  }
</style>
